<template>
  <view class="container">
    <view class="overdue">
      <view class="overdue_top">
        <view class="overdue_top_box">
          <view class="overdue_top_left">水库名称</view>
          <view class="overdue_top_right">泊于水库</view>
        </view>
      </view>
      <view class="overdue_bot">
        <view class="overdue_tips">
          <text>截至2023年12月04日&nbsp;&nbsp;共逾期</text>
          <view>{{ days }}</view>
          <text>次</text>
        </view>
        <view class="overdue_calendar">
          <uni-calendar :insert="true" :lunar="false" :selected="selectedTime" :showMonth="true" @change="change" @monthSwitch="monthSwitch" />
        </view>
      </view>
    </view>
   </view>
</template>

<script>
  import dayjs from "../../utlis/dayjs.min";

  export default {
    data() {
      return {
        days: 0,
        dayt: dayjs().format('YYYY-MM-DD'),
        selectedTime: [],
      }
    },
    onLoad(options) {
      this.getCalendar()
      this.getCount()
    },
    methods: {
      // 巡查逾期次数统计
      getCalendar() {
        let temp = {
          reseId: '1',
          startTime: dayjs().startOf("month").add(0, "day").format('YYYY-MM-DD'),
          endTime: dayjs().format('YYYY-MM-DD'),
        }
        this.$request.overdue(temp).then(res => {
          this.days = res.data.days || 0
        })
      },
      // 日历巡查数据
      getCount(time) {
        let temp = {
          reseId: '1',
        }
        if(time) {
          temp.startTime = dayjs(time).startOf("month").add(0, "day").format('YYYY-MM-DD')
          temp.endTime = dayjs(time).endOf("month").add(0, "day").format('YYYY-MM-DD')
        } else {
          temp.startTime = dayjs().startOf("year").add(0, "day").format('YYYY-MM-DD')
          temp.endTime = dayjs().format('YYYY-MM-DD')
        }
        this.selectedTime = []
        this.$request.statistics(temp).then(res => {
          for (const key in res.data) {
            this.selectedTime.push({
              date: res.data[key],
              info: '已巡查',
            })
          }
        })
      },
      // 日历切换
      change(e) {
        console.log(e)
      },
      // 年/月 切换
      monthSwitch(e) {
        let time = e.year + '-' + e.month
        this.getCount(time)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .overdue {
    width: 100%;
    height: 100%;
  }
  .overdue_top {
    padding: 25rpx 25rpx 270rpx;
    background-color: #5090EF;

    .overdue_top_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 27rpx 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
      font-size: 30rpx;
      line-height: 30rpx;
    }
  }

  .overdue_bot {
    padding: 0 25rpx;
    margin-top: -150rpx;

    .overdue_tips {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      font-size: 28rpx;
      line-height: 28rpx;
      color: #fff;

      view {
        font-size: 60rpx;
        line-height: 60rpx;
        padding: 0 10rpx;
      }
    }

    .overdue_calendar {
      padding-top: 25rpx;

      .uni-calendar {
        ::v-deep {
          .uni-calendar__content {
            border-radius: 20rpx;
          }

          .uni-calendar__header {
            .uni-calendar__backtoday {
              display: none;
            }
          }

          .uni-calendar__box {
            .uni-calendar__weeks {
              .uni-calendar__weeks-item {
                .uni-calendar-item__weeks-box {
                  .uni-calendar-item__weeks-box-item {
                    .uni-calendar-item__weeks-box-circle {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
